<template>
    <div class="home">
        <div class="kekebigbox keke_doc_clearfix">
            <div class="kekedoc_indexhd wp">
                <div class="hd_left">
                    <div class="left_item">
                        <div class="navTitleBox">
                            <img src="/static/picture/category-area.png">
                            <div class="navTitle">按分类看</div>
                            <div class="navDescribe">分门别类，找你所想</div>
                        </div>
                        <div class="popup">
                            <ul class="cate_list_box keke_doc_clearfix">
                                <li v-for="(item,index) in homeData.classifies">
                                    <div class="firstcatename">
                                        <router-link target="_blank" tag="a"  :to="'/list/'+item.id">{{item.name}}</router-link>

                                    </div>
                                    <span class="catelist keke_doc_clearfix">
                                        <router-link target="_blank" tag="a" v-for="(subItem,sid) in item['children']" :key="sid" :to="'/list/'+item.id+'/'+subItem.id">{{subItem.name}}</router-link>
									</span>
                                </li>
                            </ul>
                            <div class="openmore">

                                <router-link class="actives" to="/list">查看全部公文</router-link>
                            </div>

                        </div>
                    </div>
                    <div class="left_item">
                      <span @click="showTeach" >
                        <div class="navTitleBox">
                          <img src="/static/picture/category-specialty.png">
                          <div class="navTitle">使用教程</div>
                          <div class="navDescribe">贴心教程，直达所需</div>
                        </div>
                      </span>

                        <div class="popup">
                            <h1 class="searchtitle">公文搜索</h1>
                            <div class="search_bar">
<!--                                <input type="text" class="tx" id="names2" placeholder="输入关键词，多个关键词用空格分开">-->
                                <el-input v-model="keyword" style="width: 100%;border:0px;" placeholder="支持多个关键词空格隔开搜索，如:领导 发言"></el-input>
                                <button class="s_c actives" id="search2" @click="search"><span class="myfont">&#xe652;</span>搜索</button>
                            </div>
                            <div class="hotkeyword"> 热门搜索：
                                <router-link target="_blank" tag="a" v-for="(item,index) in homeData.hotWords" :key="index" :to="'/search/'+item">
                                  <span style="color: #F83138FF" >{{item}}</span>
                                </router-link>

                            </div>
                        </div>
                    </div>
                    <div class="left_item">
                        <a href="/list/40" >
                            <div class="navTitleBox">
                                <img src="/static/picture/category-ask.png">
                                <div class="navTitle">免费专区</div>
                                <div class="navDescribe">所有公文，尽情下载</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div id="slideBox" class="slideBox">
                    <div class="hd">
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="bd">
                        <ul>
                            <!--<li><a href="/"><img
                                    src="/static/picture/e3763jc3v4ebrve.png"/></a></li>-->
<!--                            <li><a href="/"><img src="/static/picture/lunbo/1.png"/></a></li>-->
                            <li><a href="/"><img src="/static/picture/lunbo/2.png"/></a></li>
                            <li><a href="/"><img src="/static/picture/lunbo/3.png"/></a></li>
<!--                            <li><a href="/"><img src="/static/picture/lunbo/4.png"/></a></li>-->
<!--                            <li><a href="/"><img src="/static/picture/lunbo/5.png"/></a></li>-->
                        </ul>
                    </div>
                </div>
                <div class="hd_right_box">
                    <div class="hd_right">
                        <div class="right_top">
                            <h2>平台累计收录公文</h2>
                            <div class="docnumboxs"><span class="docnum" id="docnum">{{homeData.total}}</span>份</div>
                        </div>
                        <!--<a href="/search" target="_blank"
                           class="updocbtn actives">
                            <i class="myfont">&#xe69a;</i> 搜资料教程 </a>-->
                        <dl class="fwbz">
                            <dt><span class="active">联系客服代找资料</span></dt>
                            <dd>加客服微信 xywenhui2025，私发想要资料的标题/关键词，客服可以快速帮你代查找相关所有资料</dd>
                        </dl>

                        <div>
                          <img style="width: 120px;height: 120px" src="/static/picture/wechat.png">
                        </div>
                        <!--<ul class="advantage">
                            <li>
                                <img src="/static/picture/s-fast.png">快捷
                            </li>
                            <li>
                                <img src="/static/picture/s-profession.png">高效
                            </li>
                            <li>
                                <img src="/static/picture/s-privacy.png">超值
                            </li>
                        </ul>-->
                    </div>
                </div>
            </div>
<!--            <div class="ad-box">-->
<!--                <ul>-->
<!--                    <li v-for="item in adImg"><a :href="item.link" target="_blank"><img style="width: 100%;height: 100%;object-fit: cover" :src="item.img" alt=""></a></li>-->
<!--                </ul>-->

<!--            </div>-->
        </div>

        <div class="bodybox">
            <div id="lmn3">
                <div class="livebigbox" style="background: none;">
                    <div class="mods wp">
                        <div class="mod_top_nav">
                            <h2>最新公文</h2>
                          <el-checkbox @change="getToday" v-model="isToday" style="color: #F83138FF;font-weight: bolder;"  :true-label="1" :false-label="2" >
                            <span style="font-size: 16px">只看今日更新
                              <span style="color: black;font-size: 15px;margin-left: 10px;font-weight:500;" >今日已更新
                                <span style="color: red;font-weight:500">{{ homeData.todayCount }}</span>
                                份精品资料，每天都有新内容</span>
                            </span>
                          </el-checkbox>

                          <div class="right_nav pts15">
                                <cite>/</cite>
                                    <router-link target="_blank" tag="a" to="/list/38"><i></i> 查看更多</router-link>
                                <cite>/</cite>
                            </div>
                            <div class="top_nav_breadcrumb">

                            </div>
                        </div>

                      <div class="mod_list keke_doc_clearfix">
                        <li v-for="(item,index) in homeData.topRecords">
                          <span>{{item['human_time']}}</span>
                          <i :style="'font-size:16px;width: 20px;height: 22px;color:'+$utils.getIconColor(item.type)"  :class="'far '+$utils.getIcon(item.type)"></i>
                          <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">{{item.title}}</router-link>
                        </li>
                      </div>

                        <div class="mod_list keke_doc_clearfix">
                            <li v-for="(item,index) in records">
                                <span>{{item['human_time']}}</span>
                                <i :style="'font-size:16px;width: 20px;height: 22px;color:'+$utils.getIconColor(item.type)"  :class="'far '+$utils.getIcon(item.type)"></i>
                                <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">{{item.title}}</router-link>
                            </li>
                        </div>
                    </div>
                </div>

            </div>
<!--            <div class="wp" style="margin-top:30px;">
                <router-link class="actives" to="/"><img src="/static/picture/yvhhkr0r7ks2nc0.jpg"></router-link>

            </div>-->


        </div>
    </div>
</template>

<script>
import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
    export default {
        name: "HomeView",
        components: {},
        data() {
            return {
                // classifies:[],
                // hotWords:[],
                // recommend:[],
                records:[],
                // topRecords:[],
                // seeRank:[],
                total:0,
                keyword:'',
                isToday:2,
                todayCount:"",
              adImg:[
                {
                  img:'/static/images/1.png',
                  link:"/list/39"
                },
                {
                  img:'/static/images/4.png',
                  link:"/list/38?keyword=生活会&pos=2&pic=1"
                },
                {
                  img:'/static/images/3.png',
                  link:"/list/38?keyword=八项规定&pos=3&pic=1"

                },
                {
                  img:'/static/images/2.png',
                  link:"/list/38?keyword=两会&pos=4&pic=1"
                }

              ]
            };
        },
        created() {

          this.$apis.getDataList({isToday:this.isToday,pageSize:90}).then(lstres=>{
            //console.log(lstres.records)
            // this.SetHomeDataRecords(lstres.records)
            this.records=lstres.records;
          })

            // this.$apis.homeData().then(res=>{
            //     this.classifies=res.classifies;
            //     this.hotWords=res.hotWords;
            //     this.recommend=res.recommend;
            //     this.records=res.records;
            //     this.topRecords=res.topRecords;
            //     this.seeRank=res.seeRank;
            //     this.total=res.total;
            //     this.todayCount=res.todayCount;
            // })
        },
        computed: {
          ...mapGetters(["homeData"]),

        },
        methods:{
            ...mapMutations('user',['SetHomeDataRecords']),
            getToday(){
              console.log('getToday')

              this.$apis.getDataList({isToday:this.isToday,pageSize:90}).then(lstres=>{
                //console.log(lstres.records)
                // this.SetHomeDataRecords(lstres.records)
                this.records=lstres.records;
              })
            },
            search(){
                if(!this.keyword){
                    this.$message({
                        message: '请输入搜索关键词',
                        type: 'warning',
                        offset:0
                    });
                    return;
                }
                let routeUrl =this.$router.resolve({ path: `/search/${this.keyword}` })
                window.open(routeUrl.href, "_blank");
            },
            showTeach(){
              let routeUrl =this.$router.resolve({ path: `/teach` })
              window.open(routeUrl.href, "_blank");
            },

        },
        mounted: function () {
            this.$nextTick(() => {
                jQuery(".slideBox").slide({
                    mainCell: ".bd ul",
                    autoPlay: true
                });
                jQuery('.navTitleBox,.popup').hover(function () {
                    jQuery(this).addClass('navTitleBoxbg').parent().addClass('navTitleBoxbg').find('.popup').show();
                }, function () {
                    jQuery(this).removeClass('navTitleBoxbg').parent().removeClass('navTitleBoxbg').find('.popup').hide()
                });
                jQuery('.newleft h2').on("click", function () {

                    var index = jQuery(this).index();
                    jQuery(this).addClass('active').siblings().removeClass('active');
                    var l = 0;
                    if (index === 2) {
                        l = 90;
                    }
                    jQuery('.active-line').attr('style', 'transform: translateX(' + parseInt(l) + 'px); width: 80px;');
                    jQuery('.newleft .bd').hide();
                    jQuery('.newleft .bd' + index).show();
                });
            });
        }
    };
</script>
<style>
    .ad-box{
        width: 1200px;
        margin:0 auto;
        margin-top:30px;

    }
    .ad-box ul{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .ad-box ul li{
        width: 23%;
        cursor: pointer;
    }
    .search_bar button{
        width: 90px;
        background:  #F83138FF !important;
    }
    .mod_list li {
        line-height: 35px;
        float: left;
        width: 33.3%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mod_list li span {
        float: right;
        color: #999;
        margin: 0 20px
    }

    .mod_list li a {
        font-size: 14px;
        color: #000;
        white-space: nowrap;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .mod_list .myfont {
        font-size: 16px;
        margin-right: 7px
    }
</style>
